<template>
	<view>
		<!--pages/useCoupon/useCoupon.wxml-->
		<view class="navigation-bar">
			<view class="navigations">
				<view :class="'navs' +  (activeIndex == 1 ? ' nav-actived' : '')" data-index="1" @tap="changeindex">
					门店优惠券</view>
				<view :class="'navs' +  (activeIndex == 2 ? ' nav-actived' : '')" data-index="2" @tap="changeindex">
					会员优惠券</view>
				<!-- #ifdef MP-WEIXIN -->
				<!-- <view :class="'navs' +  (activeIndex == 3 ? ' nav-actived' : '')" data-index="3" @tap="changeindex">商家券
				</view> -->
				<!-- #endif -->

			</view>
		</view>
		<!-- 优惠券 -->
		<view class="allcouponbox" v-if="activeIndex==1&&couponList&&couponList.length">
			<block v-for="(item, index) in couponList" :key="index" :for-id="index">
				<view class="couponBg">
					<view class="iconfont iconyouhuiquan wxmericon home-coupon-item-icon" style="color:#ff8281;"
						v-if="item.coupon_choice_type == 1"></view>
					<view class="iconfont iconshangjiaquan wxmericon home-coupon-item-icon"
						v-if="item.coupon_choice_type == 3"></view>
					<view class="couponBox">
						<view class="left">
							<text>￥</text>
							<text>{{item.reduce_money}}</text>
						</view>
						<view class="right">
							<view class="title">{{item.coupon_name}}</view>
							<view class="cooupon-mj">
								<text>满{{item.need_money}}元减使用</text>
							</view>
							<view class="stage">{{item.begin_time}}~{{item.end_time}}</view>
							<view class="btn" :class="item.coupon_choice_type == 3 ? 'col2' :''"
								@tap.stop="usethiscoupon" :data-index="index">使用</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 会员优惠券 -->
		<view class="allcouponbox" v-if="activeIndex==2&&memCoupon&&memCoupon.length">
			<block v-for="(item, index) in memCoupon" :key="index" :for-id="index">
				<view class="couponBg" @tap.stop="todetails" :data-myid="item.id">
					<!-- 	<view class="iconfont iconyouhuiquan wxmericon home-coupon-item-icon" style="color:#ff8281;"></view> -->
					<image src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1729071091670f87f3c8db6.png" mode=""></image>
					<view class="couponBox">
						<view class="left">
							<text>￥</text>
							<text>{{item.reduce_money}}</text>
						</view>
						<view class="right" style="padding-top:0;">
							<view class="title">{{item.coupon_name}}</view>
							<view class="cooupon-mj">
								<text>满{{item.need_money}}元减使用</text>
							</view>
							<view class="stage">{{item.begin_time}}~{{item.end_time}}</view>
							<view class="btn" style="color:#eea95f" @tap.stop="usethiscoupon" :data-index="index">使用
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 商家优惠券 -->
		<view class="allcouponbox" v-if="activeIndex==3&&merCoupon&&merCoupon.length">
			<block v-for="(item, index) in merCoupon" :key="index" :for-id="index">
				<view class="couponBg" @tap.stop="todetails" :data-myid="item.id">

					<view class="iconfont iconyouhuiquan wxmericon home-coupon-item-icon" style="color:#ff8281;"></view>
					<view class="couponBox">
						<view class="left">
							<text>￥</text>
							<text>{{item.reduce_money}}</text>
						</view>
						<view class="right">
							<view class="title">{{item.coupon_name}}</view>
							<view class="cooupon-mj">
								<text>满{{item.need_money}}元减使用</text>
							</view>
							<view class="stage">{{item.begin_time}}~{{item.end_time}}</view>
							<view class="btn" @tap.stop="usethiscoupon" :data-index="index">使用</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- #endif -->
		<view class="donot" @tap="notusecoupon">不使用优惠券</view>
		<view v-if="empty[activeIndex-1]" class="empty">暂无可用优惠券</view>
	</view>
</template>

<script>
	// pages/useCoupon/useCoupon.js
	var app = getApp().globalData;

	export default {
		data() {
			return {
				couponList: [], //优惠券列表
				sCoupon: [],
				// 领取优惠券
				activeIndex: 1, //1优惠券 2会员优惠券 3商家券
				mCoupon: [],
				memCoupon: [],
				merCoupon: [],
				// 会员卡优惠券
				empty: [0, 0],
				goods_id: "",
				data: {
					money: 0,
					is_integral_cash: "",
					shopping_ids: '',
					goods_id: '',
					scene_type: '',
					sku_id: '',
					goods_class_id: '',
					type: 1
				}

			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var that = this;
			var money = options.money;
			var is_integral_cash = options.is_integral_cash;
			var shopping_ids = options.shopping_ids;
			console.log("options=", options)
			var goods_id = options.goods_id ? options.goods_id : ''
			var scene_type = options.scene_type ? options.scene_type : '';
			let sku_id = options.sku_id ? options.sku_id : '';
			let goods_class_id = options.goods_class_id ? options.goods_class_id : '';
			let data = {
				money: money,
				is_integral_cash: is_integral_cash,
				shopping_ids: shopping_ids,
				goods_id: goods_id,
				scene_type: scene_type,
				type: that.activeIndex
			}
			if (scene_type == 2) {
				data['sku_id'] = sku_id;
				data['goods_class_id'] = goods_class_id
			}
			this.data = data;
			this.getCouponList(data)

		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		methods: {
			changeindex: function(e) {
				var index = e.currentTarget.dataset.index;
				this.setData({
					activeIndex: index
				});
				let data = this.data
				data['type'] = index
				this.getCouponList(data)

			},
			//获取优惠券
			getCouponList(data) {
				let that = this;
				console.log(data , 'data')
				data =  Object.assign(data, { store_id: this.$store.mallStoreId })
				getApp().globalData.sendRequest({
					url: '/Coupon/getCanUseCoupon_v1',
					type: "post",
					data: data,
					success: function(res) {
						console.log(res);
						var empty = that.empty;
						if (res.status == 1) {
							if (res.data.length > 0) {
								if (data.type == 1) {
									that.setData({
										couponList: res.data
									});
								} else if (data.type == 2) {
									that.setData({
										memCoupon: res.data
									});
								} else if (data.type == 3) {

									that.setData({
										merCoupon: res.data
									});
								}
							} else {
								that.setData({
									couponList: [],
									memCoupon: [],
									merCoupon: []
								});
								uni.showToast({
									title: '暂无优惠券',
									icon: 'none',
									duration: 1500
								})
							}
						}
					}
				});
			},
			//使用优惠券
			usethiscoupon: function(e) {
				var index = e.currentTarget.dataset.index;
				var activeIndex = this.activeIndex;

				if (activeIndex == 1) {
					var data = this.couponList;
				} else if (activeIndex == 2) {
					var data = this.memCoupon;
				} else if (activeIndex == 3) {
					var data = this.merCoupon;
				}
				var useCoupon = data[index];
				useCoupon['couponType'] = useCoupon.coupon_choice_type //1是门店优惠券 2是商户优惠券 3是商家券

				uni.setStorageSync('useCoupon', useCoupon);
				uni.navigateBack({
					delta: 1
				});
			},
			// 不使用优惠券
			notusecoupon: function() {
				uni.removeStorageSync('useCoupon');
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>
<style>
	@import "./useCoupon.css";

	.navigation-bar {
		width: 100%;
		height: 96rpx;
		/* padding-top: 60rpx; */
		background: #fff;
		text-align: center;

	}

	.navigations {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		height: 54rpx;
		background: rgba(246, 246, 246, 1);
		border-radius: 26rpx;
		margin: 0 auto;
	}

	.navs {
		width: 180rpx;
		height: 54rpx;
		border-radius: 26rpx;
		line-height: 54rpx;
		font-size: 28rpx;
		color: #333;
		text-align: center;
	}

	.nav-actived {
		background: rgba(255, 92, 109, 1);
		color: #fff
	}

	.home-coupon-item-icon {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.wxmericon {
		color: #3fd8a3;
		font-size: 182rpx;
	}

	.col2 {
		color: #23D295;
	}
</style>
